<template>
  <div class="stock-container">
    <!-- 页面标题 -->
    <div class="header">
      <h1>股票信息</h1>
      <p class="subtitle">Stock Information</p>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <div class="loading-spinner"></div>
      <p class="loading-text">加载中...</p>
    </div>

    <!-- 错误提示 -->
    <div v-else-if="error" class="error-message">
      <p>{{ error }}</p>
      <button @click="fetchStockData" class="retry-btn">重试</button>
    </div>

    <!-- 股票列表 -->
    <div v-else>
<!--      &lt;!&ndash; 统计信息 &ndash;&gt;-->
<!--      <div class="stats-info">-->
<!--        <p>共 {{ totalItems }} 条记录，第 {{ currentPage }} / {{ totalPages }} 页</p>-->
<!--      </div>-->

      <div class="stock-grid">
        <div
            v-for="(stock, index) in currentPageStocks"
            :key="index"
            class="stock-card"
            @click="handleStockClick(stock)"
            :style="{ animationDelay: `${index * 0.1}s` }"
        >
          <div class="stock-content">
            <div class="stock-info">
              <div class="stock-label">股票代码</div>
              <div class="stock-symbol">{{ stock.stockSymbol }}</div>
            </div>
            <div class="stock-divider-vertical"></div>
            <div class="stock-info">
              <div class="stock-label">股票编号</div>
              <div class="stock-number">{{ stock.stockNumber }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 分页组件 -->
      <div v-if="totalPages > 1" class="pagination-container">
        <div class="pagination">
          <!-- 上一页 -->
          <button
              class="pagination-btn prev-btn"
              :disabled="currentPage === 1"
              @click="goToPage(currentPage - 1)"
          >
            <span>‹</span>
          </button>

          <!-- 页码按钮 -->
          <button
              v-for="page in visiblePages"
              :key="page"
              class="pagination-btn page-btn"
              :class="{ active: page === currentPage }"
              @click="goToPage(page)"
          >
            {{ page }}
          </button>

          <!-- 下一页 -->
          <button
              class="pagination-btn next-btn"
              :disabled="currentPage === totalPages"
              @click="goToPage(currentPage + 1)"
          >
            <span>›</span>
          </button>
        </div>

        <!-- 页面跳转 -->
        <div class="page-jump">
          <span>跳转到</span>
          <input
              type="number"
              v-model.number="jumpPage"
              :min="1"
              :max="totalPages"
              @keyup.enter="handlePageJump"
              class="page-input"
          >
          <button @click="handlePageJump" class="jump-btn">确定</button>
        </div>
      </div>
    </div>

    <!-- 刷新按钮 -->
    <button
        @click="refreshData"
        class="refresh-btn"
        :class="{ rotating: isRefreshing }"
    >
      ↻
    </button>
  </div>
</template>

<script>
import {getStockNumAndSymbols} from "@/api/stock/stocks";


export default {
  name: 'StockDisplay',
  data() {
    return {
      stocks: [],
      loading: true,
      error: null,
      isRefreshing: false,
      // 分页相关
      currentPage: 1,
      pageSize: 20,
      jumpPage: 1
    }
  },
  computed: {
    // 总记录数
    totalItems() {
      return this.stocks.length
    },
    // 总页数
    totalPages() {
      return Math.ceil(this.totalItems / this.pageSize)
    },
    // 当前页显示的股票数据
    currentPageStocks() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.stocks.slice(start, end)
    },
    // 可见页码
    visiblePages() {
      const pages = []
      const total = this.totalPages
      const current = this.currentPage

      if (total <= 7) {
        // 总页数少于等于7页，显示所有页码
        for (let i = 1; i <= total; i++) {
          pages.push(i)
        }
      } else {
        // 总页数大于7页，显示部分页码
        if (current <= 4) {
          // 当前页在前面
          for (let i = 1; i <= 5; i++) {
            pages.push(i)
          }
          pages.push('...')
          pages.push(total)
        } else if (current >= total - 3) {
          // 当前页在后面
          pages.push(1)
          pages.push('...')
          for (let i = total - 4; i <= total; i++) {
            pages.push(i)
          }
        } else {
          // 当前页在中间
          pages.push(1)
          pages.push('...')
          for (let i = current - 1; i <= current + 1; i++) {
            pages.push(i)
          }
          pages.push('...')
          pages.push(total)
        }
      }
      return pages
    }
  },
  mounted() {
    this.fetchStockData()
  },
  methods: {
    async fetchStockData() {
      this.loading = true
      this.error = null

      try {
        // 调用后端接口
        const {code, data, message} = await getStockNumAndSymbols()

        if (code === 200) {
          this.stocks = data
          // 重置到第一页
          this.currentPage = 1
          this.jumpPage = 1
        } else {
          throw new Error(message || '获取数据失败')
        }
      } catch (err) {
        this.error = err.message || '网络错误，请稍后重试'
        console.error('获取股票数据失败:', err)
      } finally {
        this.loading = false
      }
    },

    async refreshData() {
      if (this.isRefreshing) return

      this.isRefreshing = true
      await this.fetchStockData()

      setTimeout(() => {
        this.isRefreshing = false
      }, 1000)
    },

    handleStockClick(stock) {
      // 点击股票卡片的处理逻辑
      this.$router.push({
        path: 'stockInformation',
        query: {
          stockSymbol: stock.stockSymbol,
          stockNumber: stock.stockNumber
        }
      })

    },

    // 跳转到指定页面
    goToPage(page) {
      if (page >= 1 && page <= this.totalPages && page !== this.currentPage) {
        this.currentPage = page
        this.jumpPage = page
        // 滚动到顶部
        this.$nextTick(() => {
          window.scrollTo({ top: 0, behavior: 'smooth' })
        })
      }
    },

    // 处理页面跳转
    handlePageJump() {
      if (this.jumpPage >= 1 && this.jumpPage <= this.totalPages) {
        this.goToPage(this.jumpPage)
      } else {
        this.jumpPage = this.currentPage
      }
    }
  },
  watch: {
    // 监听jumpPage变化，确保在合理范围内
    jumpPage(newVal) {
      if (newVal < 1) {
        this.jumpPage = 1
      } else if (newVal > this.totalPages) {
        this.jumpPage = this.totalPages
      }
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.stock-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  max-width: 1400px;
  margin: 0 auto;
}

/* 头部样式 */
.header {
  text-align: center;
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 2px solid #000;
}

.header h1 {
  font-size: 28px;
  font-weight: 700;
  color: #000;
  margin-bottom: 8px;
}

.subtitle {
  font-size: 14px;
  color: #666;
  letter-spacing: 1px;
}

/* 统计信息 */
.stats-info {
  text-align: center;
  margin-bottom: 30px;
  padding: 15px;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  color: #666;
  font-size: 14px;
}

/* 加载状态 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #e0e0e0;
  border-top: 3px solid #000;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-text {
  margin-top: 20px;
  color: #666;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 错误提示 */
.error-message {
  background-color: #000;
  color: #fff;
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  max-width: 400px;
  margin: 50px auto;
}

.retry-btn {
  margin-top: 20px;
  padding: 10px 30px;
  background-color: #fff;
  color: #000;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.retry-btn:hover {
  transform: scale(1.05);
}

/* 股票网格 */
.stock-grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  margin-bottom: 40px;
}

/* 股票卡片 */
.stock-card {
  background-color: #fff;
  border: 2px solid #000;
  border-radius: 16px;
  padding: 25px 40px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  animation: fadeInUp 0.6s ease-out backwards;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stock-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stock-card:hover::before {
  transform: translateX(0);
}

.stock-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.stock-card:hover .stock-content * {
  color: #fff;
}

.stock-card:hover .stock-divider {
  background-color: #fff;
}

.stock-card:hover .stock-divider-vertical {
  background-color: #fff;
}

.stock-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  gap: 60px;
}

.stock-info {
  flex: 1;
  text-align: center;
}

.stock-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}

.stock-symbol {
  font-size: 24px;
  font-weight: 700;
  color: #000;
  letter-spacing: 1px;
  transition: color 0.3s ease;
}

.stock-divider {
  width: 40px;
  height: 2px;
  background-color: #000;
  margin: 16px 0;
  transition: background-color 0.3s ease;
}

.stock-divider-vertical {
  width: 2px;
  height: 40px;
  background-color: #e0e0e0;
  margin: 0 20px;
  transition: background-color 0.3s ease;
}

.stock-number {
  font-size: 18px;
  font-weight: 500;
  color: #000;
  transition: color 0.3s ease;
}

/* 分页样式 */
.pagination-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
  padding: 30px;
  background-color: #fff;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination-btn {
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #000;
  background-color: #fff;
  color: #000;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.pagination-btn:hover:not(:disabled) {
  background-color: #000;
  color: #fff;
  transform: translateY(-2px);
}

.pagination-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}

.pagination-btn.active {
  background-color: #000;
  color: #fff;
}

.page-btn {
  padding: 0 12px;
}

.prev-btn span,
.next-btn span {
  font-size: 18px;
  font-weight: bold;
}

/* 页面跳转 */
.page-jump {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #666;
}

.page-input {
  width: 60px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
}

.page-input:focus {
  outline: none;
  border-color: #000;
}

.jump-btn {
  padding: 6px 12px;
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.jump-btn:hover {
  transform: scale(1.05);
}

/* 刷新按钮 */
.refresh-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 56px;
  height: 56px;
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  font-size: 20px;
}

.refresh-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3);
}

.refresh-btn:active {
  transform: scale(0.95);
}

.refresh-btn.rotating {
  animation: rotate 1s ease-in-out;
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .stock-container {
    padding: 15px;
    max-width: 100%;
  }

  .header h1 {
    font-size: 24px;
  }

  .stock-grid {
    gap: 12px;
  }

  .stock-card {
    padding: 20px 25px;
  }

  .stock-symbol {
    font-size: 20px;
  }

  .stock-number {
    font-size: 16px;
  }

  .pagination-container {
    padding: 20px;
  }

  .pagination {
    flex-wrap: wrap;
    justify-content: center;
  }

  .pagination-btn {
    min-width: 36px;
    height: 36px;
  }

  .page-jump {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .refresh-btn {
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 480px) {
  .stock-card {
    padding: 18px 20px;
  }

  .stock-symbol {
    font-size: 18px;
  }

  .stock-number {
    font-size: 14px;
  }

  .stock-divider-vertical {
    margin: 0 15px;
  }

  .pagination-btn {
    min-width: 32px;
    height: 32px;
    font-size: 12px;
  }
}
</style>